<template>
  <el-container>
    <el-main class="bg">
      <div class="login-container">
        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          autocomplete="on"
          label-position="left"
          label-width="0px"
          class="card-box login-form"
        >
          <el-header class="head" style="padding: 0px">
            <img :src="logo" alt="车商云">
          </el-header>
          <el-form-item prop="username" class="el-form-item__white">
            <span class="svg-container svg-container_login" style="font-size:24px;">
              <svg-icon icon-class="user"/>
            </span>
            <el-input
              v-model="loginForm.username"
              name="username"
              type="text"
              autocomplete="on"
              placeholder="用户名"
            />
          </el-form-item>
          <el-form-item prop="password" class="el-form-item__white">
            <span class="svg-container svg-container_login">
              <svg-icon icon-class="password"/>
            </span>
            <el-input
              :type="pwdType"
              v-model="loginForm.password"
              name="password"
              autocomplete="on"
              placeholder="密码"
              @keyup.enter.native="handleLogin"
            />
            <span class="show-pwd" @click="showPwd">
              <svg-icon icon-class="eye"/>
            </span>
          </el-form-item>
          <!--<el-form-item prop="inputCode" class="el-form-item__white">
            <el-input
              v-model="loginForm.inputCode"
              name="inputCode"
              type="text"
              style="width: 38%;margin-right: 2px;"
              placeholder="验证码"
            />
            <div style="float: right;" @click="refreshCode">
              <SIdentify :identify-code="identifyCode"/>
            </div>
          </el-form-item>
          <el-form-item prop="code" class="el-form-item__white">
            <span class="svg-container svg-container_login">
              <i class="el-icon-umbrella"/>
            </span>
            <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 36%" @keyup.enter.native="handleLogin"/>
            <div class="login-code">
              <img :src="codeUrl" @click="getCode">
            </div>
          </el-form-item>-->

          <!--          <el-checkbox class="remember-psd">记住密码</el-checkbox>-->
          <div class="login-button-wrapper" >
            <el-button
              :loading="loading"
              type="default"
              class="login-button"
              @click.native.prevent="handleLogin"
            >登&emsp;录</el-button>
            <!-- <a class="forget-psd" @click="forgetPwd">忘记密码</a>-->
          </div>
        </el-form>
      </div>
    </el-main>
    <el-footer class="foot">
      <foot/>
    </el-footer>

    <forget-pwd-dialog
      v-if="forgetPwdDialog"
      :forget-pwd-dialog.sync="forgetPwdDialog"
    />

  </el-container>
</template>

<script>
import _ from 'lodash'
import foot from './foot'
import SIdentify from './identify'
// import pc_csy from '@/assets/img/logo@3x.png'
import pc_csy from '@/assets/img/logo.png'
import { initUserData, getCodeImg } from '@/api/login'
import ForgetPwdDialog from './forgetPwdDialog'

export default {
  name: 'Login',
  components: {
    ForgetPwdDialog,
    foot,
    SIdentify
  },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (_.isEmpty(value)) {
        callback(new Error('请输入正确的用户名'))
      } else {
        callback()
      }
    }
    const validatePass = (rule, value, callback) => {
      if (_.isEmpty(value)) {
        callback(new Error('密码不能为空'))
      } else {
        callback()
      }
    }

    return {
      forgetPwdDialog: false,
      identifyCode: '',
      identifyCodes: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      loginForm: {
        username: '',
        password: ''
      },
      codeUrl: '',
      loginRules: {
        username: [
          { required: true, trigger: 'blur', validator: validateUsername }
        ],
        password: [{ required: true, trigger: 'blur', validator: validatePass }],
        code: [{ required: true, trigger: 'blur', message: '请输入正确的计算结果' }]
      },
      loading: false,
      pwdType: 'password',
      height: document.body.clientHeight - 120,
      logo: pc_csy
    }
  },
  mounted() {
    // this.makeCode(this.identifyCodes, 4)
    // this.getCode()
  },
  methods: {
    getCode() {
      getCodeImg().then(res => {
        this.codeUrl = res.img
        // this.loginForm.uuid = res.uuid
      })
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store
            .dispatch('Login', this.loginForm)
            .then(() => {
              const path = this.$route.query.redirect
                ? this.$route.query.redirect
                : '/'
              this.$router.push({ path: path })
            })
            .catch(() => {
              // this.getCode()
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    forgetPwd() {
      this.forgetPwdDialog = true
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  $bg: #2d3a4b;
  $dark_gray: #889aa4;
  $light_gray: #eee;
  $black: #000;

  .head {
    text-align: center;
    img {
      width: 260px;
    }
  }

  .foot {
    width: 100%;
    position: fixed;
    bottom: 0;
  }

  .bg {
    /*background-color: $bg;*/
  background: url('../../assets/img/loginZX.jpg') no-repeat;
    background-size: 100% 100%;
    // background-width:100%;
    /*min-height: 450px;*/
  }

  .forget-psd {
    display: block;
    margin-top: 12px;
    color: #fff;
    margin-bottom: 10px;
    font-size: 14px;
    /*text-decoration: underline;*/
    &:hover {
      color: rgb(204,0,12) ;
    }
  }

  .remember-psd {
    float: right;
    margin-bottom: 10px;
    .el-checkbox__input + .el-checkbox__label {
      color: #fff;
    }
  }

  .login-button-wrapper {
    margin-top: 14px;
    border: none !important;
    .el-form-item__content {
      background: transparent !important;
      opacity: 1 !important;
    }
    .login-button {
      width: 100%;
      height: 46px;
      font-size: 16px;
      /*background: #A30000;*/
      background: transparent;
      border-radius: 5px;
      font-size: 18px;
      /*color: #FFFFFF;*/
      color: #fff;
      /*border: none;*/
      border: 1px solid #fff;
      &:hover, &:focus {
        border-color: rgb(204,0,12) ;
        color: rgb(204,0,12) ;
      }
    }
  }

  .login-container {
    position: fixed;
    height: 100%;
    width: 100%;
    margin-top: 30px;
    /*background-color: $bg;*/
    /*input:-webkit-autofill {*/
    /*-webkit-box-shadow: 0 0 0px 1000px #fff inset !important;*/
    /*-webkit-text-fill-color: #000 !important;*/
    /*}*/
    input {
      background: transparent;
      border: 0px;
      font-size: 16px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: #fff;
      height: 47px;
      transition: background-color 50000s ease-in-out 0s;

      // 自动填充字体颜色
      // text-fill-color: white;
      -webkit-text-fill-color: white;
    }

    .el-input {
      display: inline-block;
      color: #fff;
      width: 85%;
    }

    .el-form-item__white {
      /*background: transparent !important;*/
      background: rgba(255,255,255,0.4);
    }

    .tips {
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;
    }

    .svg-container {
      padding: 4px 5px 8px 15px;
      color: #fff;
      vertical-align: middle;
      width: 30px;
      display: inline-block;

      &_login {
        font-size: 20px;
      }
    }

    .title {
      font-size: 26px;
      font-weight: 400;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }

    .login-form {
      position: relative;
      left: 30.5%;
      top: calc(50% - 230px);
      width: 330px;
      padding: 25px 35px 15px 35px;
      /*margin: 120px auto;*/
      margin: 0px auto;
      background: rgb(99, 100, 102);
      /*background: transparent;*/
      border-radius: 20px;

      .el-input__inner {
        &::placeholder {
          color: #5f5f5f;
        }

        &::-webkit-input-placeholder {
          /* WebKit browsers 适配谷歌 */
          color: #5f5f5f;
        }

        &:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 适配火狐 */
          color: #5f5f5f;
        }

        &::-moz-placeholder {
          /* Mozilla Firefox 19+ 适配火狐 */
          color: #5f5f5f;
        }

        &:-ms-input-placeholder {
          /* Internet Explorer 10+  适配ie*/
          color: #5f5f5f;
        }
      }
    }

    .el-form-item {
      // border: 1px solid rgba(255, 255, 255, 0.1);
      /*border: 1px solid #fff;*/
      background: #636466;
      /*border-radius: 24px;*/
      color: #454545;
      border: none;
      &:focus-within {
        border: none;
      }
    }

    .el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label {
      line-height: 34px;
      /*margin-top: 3px;*/
      /*margin-top: 6px;*/
      margin-bottom: 0px;
      color: #5f5f5f;
      /*background: #FFFFFF;*/
      opacity: 0.8;
      border-bottom: 1px solid #fff;
      &:hover, &:focus-within {
        border-color: rgb(204,0,12) ;
        color: rgb(204,0,12) ;
      }
    }

    .el-form-item__error{
      color: #fff;
    }

    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
      user-select: none;
    }

    .thirdparty-button {
      position: absolute;
      right: 35px;
      bottom: 28px;
    }

    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
      /*-webkit-text-fill-color: #ededed !important;*/
      // -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
      background-color: transparent;
      background-image: none;
      transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
    }

    .login-code {
      /*width: 50%;*/
      display: inline-block;
      height: 38px;
      // float: right;
      img{
        cursor: pointer;
        vertical-align:middle
      }
    }
  }
</style>
